<template>
  <div class="app-container">
    <el-form ref="form" :model="form" label-width="100px">
      <!-- 产品名称 -->
      <el-form-item label="产品名称" prop="proName">
        <el-input 
          v-model="form.proName" 
          placeholder="请输入产品名称"
          maxlength="50"
          show-word-limit
        />
      </el-form-item>

      <!-- 销售状态 -->
      <el-form-item label="销售状态" prop="slaeFlag">
        <el-switch
          v-model="form.slaeFlag"
          :active-value="1"
          :inactive-value="0"
          active-text="在售"
          inactive-text="停售"
        />
      </el-form-item>
      <!-- 浏览量 -->
      <el-form-item label="浏览量" prop="views">
        <el-input
          v-model="form.views"
          placeholder="请输入浏览量"
          maxlength="10"
          show-word-limit
        />
      </el-form-item>
      <!-- 产品描述 -->
      <el-form-item label="产品描述" prop="description">
        <el-input
          v-model="form.description"
          type="textarea"
          :rows="5"
          placeholder="请输入产品描述"
          maxlength="500"
          show-word-limit
        />
      </el-form-item>

      <!-- 产品图片 -->
      <el-form-item label="产品图片" prop="images">
        <el-upload
          class="avatar-uploader"
          :action="BASE_URL+'/api/admin/upload'"
          list-type="picture-card"
          :file-list="form.images"
          :headers="token"
          multiple
          :limit="9"
          :before-upload="beforeUpload"
          :on-success="handleAvatarSuccess"
          :on-remove="handleRemove">
          <i class="el-icon-plus"></i>
          <div slot="file" slot-scope="{file}">
            <img
              class="el-upload-list__item-thumbnail"
              :src="BASE_URL+(file.url?file.url:file.imageUrl)"
              alt=""
            >
            <span class="el-upload-list__item-actions">
              <span
                class="el-upload-list__item-delete"
                @click="handleRemove(file)"
              >
                <i class="el-icon-delete"></i>
              </span>
            </span>
          </div>
        </el-upload>
        <div class="tip">提示：首个图片为默认主图</div>
      </el-form-item>

      <!-- 产品详情 -->
      <el-form-item label="产品详情" prop="content">
        <el-input
          v-model="form.content"
          type="textarea"
          :rows="5"
          placeholder="请输入产品详情"
          maxlength="500"
          show-word-limit
        />
      </el-form-item>

      <!-- 操作按钮 -->
      <el-form-item>
        <el-button type="primary" @click="submitForm">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getProductDetail, saveProduct } from '@/api/index'
import {getToken} from '@/utils/auth';
import {BASE_URL} from '@/utils/request'

export default {
  name: 'ProductAdd',
  data() {
    return {
      form: {
        id: null,
        proName: '',
        description: '',
        slaeFlag: 0,
        views:'',
        images: []
      },
      BASE_URL: BASE_URL,
      token: {
        Authorization: getToken()
      }
    }
  },
  mounted() {
    this.loadEditData()
  },
  methods: {
    loadEditData() {
      const id = this.$route.query.id
      if (id) {
        getProductDetail({
          id
        }).then(res => {
          this.form = res
        })
      }
    },
    submitForm() {
      let images = this.form.images.map((img, index) => ({
        imageUrl: img.url || img.imageUrl,
        ifMain: index === 0 ? 1 : 0
      }))
      let form = {
        ...this.form,
        images: images
      }
      saveProduct(form).then(res => {
        if(res.code == 1){
          this.$message.success('操作成功')
          this.$router.push('/products/index')
        }else{
          this.$message.error(res.isError)
        }
      })
    },
    beforeUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 5;
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 5MB!');
      }
      return isLt2M;
    },
    handleAvatarSuccess(res, file) {
      this.form.images.push({
        url: res.url
      });
    },
    handleRemove(file) {
      const index = this.form.images.findIndex(f => f.uid === file.uid)
      this.form.images.splice(index, 1)
    }
  }
}
</script>

<style scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
.tip {
  color: #999;
  font-size: 12px;
  margin-top: 10px;
}
</style>